<template>
  <div
    class="v-attributr-attr-list g-bg-white g-fd-c"
    :style="{overflow:'hidden', padding: smallType ? '0' : '8px'}">
    <div :class="smallType ? '_smallType' : '_largeType'" class="_attrlist-container">
      <div class="g-jc-sb _header g-flex-0">
        <div class="g-ai-c">
          <img v-if="selectedElement" :src="selectedElement && selectedElement.iconPath"  alt="" style="margin-right: 4px;width: 16px;height: 16px;">
          <span style="font-size:12px; color: #000">
            {{type}}
          </span>
        </div>
        <div class="g-ai-c">
          <span class="_sort" :class="{'_sort-active':sortActive}" @click="handleSort">
            <img src='statics/icons/app/textsort.png'/>
          </span>
          <div class="divider"></div>
          <a-dropdown :trigger="['click']">
            <span class="_tool-btn" style="cursor: pointer">
              <img
                src="statics/icons/app/iconpropertymode.svg"
                width="14px"
              />
              <a-icon type="down" style="font-size: 8px; margin-left: 6px"/>
            </span>
            <a-menu slot="overlay" style="width: 40px" @click="handleDropdownClick">
              <a-menu-item v-for="(item,index) in showLevelOptions" :key="index">
                {{ item.label }}
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>

      </div>
      <div class="_property-box" :style="{overflow:'auto', height: 'calc(100% - 30px)'}">
        <div v-if="show" class="_list-content g-flex-1">
          <m-property
            v-for="(property) in tableDataFiltered"
            :key="property.config.key"
            :property="property"
            :graphNode="selectedElement"
            :selectedRowId="selectedRowId"
            :largeType="true"
            @select="handleSelectRow"
            @rerender="rerender"
          />
        </div>
        <div v-if="mode==='detail'" class="_footer g-flex-0">
          <div class="_footer-name">{{footerInfo.name || '--'}}</div>
          <div class="_footer-tips">{{footerInfo.tips || '--'}}</div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import { SysMLUtilHelper } from 'src/api/sysml-imports';
import SimpleInput from './SimpleInput';
import CompoundedInput from './CompoundedInput';
import Property from './Property';
import { textModal } from '../modals/TextModal';
import { GraphNodeUtil } from 'pages/mxgraph/GraphNodeUtil';

export default {
  name: 'comp-attr-list',
  components: {
    'm-simple-input': SimpleInput,
    'm-compounded-input': CompoundedInput,
    'm-property': Property
  },
  props: {
    elementId: String,
    smallType: Boolean,
    mode: {
      type: String,
      default: "normal" //// detail
    }
  },
  data() {
    return {
      sortActive: false,
      showLevel: 1,
      showLevelOptions: [
				  {
          value: 1,
          label: '标准',
        },
        {
          value: 2,
          label: '专家'
        },
        {
          value: 3,
          label: '全部'
        }
      ],
      //// tableData: [],
      selectedRowId: undefined,
      inSelect: false,
      type: '',
      show: true
    };
  },
  computed: {
    tableDataFiltered(){
      let list = this.tableData.filter(i => i.config.displayLevel <= this.showLevel);
      if (this.sortActive){
        list = this.sortByWord(list);
      }
      return list;
    },
    footerInfo() {
      const row = this.tableData.find(row => row.config.key === this.selectedRowId);
      return row ? {
        name: row.config.name,
        tips: row.config.tips

      } : {};

    },
    selectedElement(){
      return app.selectedElement;
    },
    tableData(){
      return (app.selectedElement && app.selectedElement.properties.toArray()) || [];
    }
  },
  watch: {
    selectedElement: {
      handler(val){
        if (val) {
          const type = val.getTypeName();
          this.type = app.activeProject.configManager.getTypeNameConfig()[type]?.cnName || '';
          GraphNodeUtil.initProperty(val);
          //// const modelPropertyConfigItem = app.activeProject.configManager.getModelPropertyConfig()[val.getTypeName()];
          //// modelPropertyConfigItem && SysMLUtilHelper.initGraphElementProperty(val, modelPropertyConfigItem);

        }

      },
      immediate: true
    }

  },
  mounted(){

  },
  beforeDestroy(){

  },
  methods: {
    handleSort(){
      this.sortActive = !this.sortActive;
    },
    handleSetUp(){
    },
    handleSelectRow(row){
      this.selectedRowId = row.config.key;
    },

    sortByWord(arr){
      arr = [...arr];
      arr.sort((item1, item2) => {
        return item1.config.name.localeCompare(item2.name);
      });
      return arr;

    },

    handleMultiRowFocusRow(event, row, index){

    },
    handleMultiRowSaveInput(row, index){

    },
    handleMultiRowDelete(row, index){

    },
    handlePopMultiRowInput(row){
      window.event.clientX;
      textModal.popup({ text: '', x: window.event.clientX, y: window.event.clientY }).then(res => {
        console.log(res);
      });

    },
    handleDropdownClick(e) {
      this.showLevel = e.key + 1;
    },

    rerender() {
      //// console.log('重载！！！！！！！！！！');
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    },

  }
};
</script>
<style lang="scss">
.v-attributr-attr-list {
  ::-webkit-scrollbar {
    width: 6px;
  }
  ._attrlist-container {
    max-height: 100%;
    &._largeType {
      border: 1px solid #E4E3E3;
      ._header {
        border-bottom: 0;
      }
    }
  }

  ._typename {
    font-size: 12px;
    color: #000000;
    height: 24px;
    background: #F7F7F7;
    border-bottom: 1px solid #eee;
    padding-left: 10px;
    display: flex;
    align-items: center;
  }
	._header {
		padding:4px 10px ;
    border-bottom: 1px solid #B1CEE2;
    background:#D4EBF8;
    height: 30px;
    .divider {
      width: 1px;
      height: 16px;
      background: #B1CEE2;
      margin: 0 10px;
    }
	}
	._sort {
    border: 1px solid #D4EBF8;
    font-size: 0;
    display: inline-block;
		cursor: pointer;
    width: 16px;
    height: 16px;
		&._sort-active {
		  background: linear-gradient(180deg, #B9E3FF 0%, #47B3FF 55%, #80C8FE 100%);
      border: 1px solid #B1CEE2;
		}
    &:hover {
      background: linear-gradient(180deg, #E7F5FE 0%, #B0DEFF 65%, #B2DDFD 100%);
      border: 1px solid #B1CEE2;
		}
	}
	._img-btn {
		padding: 2px;
		display: inline-block;
		box-sizing: border-box;
		cursor: pointer;
    top: 1px !important;
    //// top: 50% !important;
    //// transform: translateY(-50%);
		img {
			display: block;
			height: 14px;
			width: 14px;
		}
		&:hover {
			padding: 1px;
      background: linear-gradient(180deg, #E7F5FE 0%, #B0DEFF 65%, #B2DDFD 100%);
      border: 1px solid #B1CEE2;
		}
		&:active {
			padding: 1px;
      background: linear-gradient(180deg, #B9E3FF 0%, #47B3FF 55%, #80C8FE 100%);
      border: 1px solid #B1CEE2;
		}
  }
  ._list-content.readOnlyAttr {
    cursor: not-allowed;
    ._row{
      pointer-events: none;
    }
  }
	._row {
		line-height: 20px;
		border-bottom: 1px solid #eee;
    ._readonly{
      color: rgba(0,0,0,.45);
    }
		._col-label {
			line-height: 20px;
			flex: 0 0 96px;
			width: 96px;
			border-right: 1px solid #eee;
			color: black;
			padding: 2px;
      padding-left: 10px;
			font-size: 12px;
		}
		._col-value {
			line-height: 20px;
			flex:1 1 100px;
			width: 100px;
			padding: 1px;
      padding-left: 10px;
      border: 1px solid #fff;
		}
		&._selected {
			._col-label {
				background: #3483b8;
				//// border-right: 1px solid #3483b8;
				color: white;
			}
      ._col-value{
        box-sizing: border-box;
        border: 1px solid #1890FF;
      }

		}
  }
  ._footer {
    font-size:12px;
    border-top: 1px solid rgba(240,240,240,1);
    min-height: 60px;
    ._footer-name {
      height:24px;
      line-height: 24px;
      background:rgba(246,252,255,1);
      color:rgba(0,0,0,1);
      padding: 0 10px;
    }
    ._footer-tips {
      padding: 0 10px;
      color:#444;
      line-height:20px;
      word-break: break-all;
      margin-top: 5px;
    }
  }

}
</style>
